import {Button, Card, Col, Row} from 'antd'
import { useStore } from '@/store'
import { useState, useEffect } from 'react'
import {useNavigate} from 'react-router-dom'
import moment from 'moment';


const StudentExam = (props) => {
    const {api, requetParams} = props
    const { operateStore } = useStore()
    const [items, setItems] = useState([])
    const navigate = useNavigate()


    const onClick = async(id) => {
        navigate(`/online_exam?id=${id}`)
    }
    useEffect(() => {
        const loadDetail = async () => {
            const data = await operateStore.getItems(api, requetParams)
            setItems(data.list)
        }
        loadDetail()
      }, [api, requetParams, operateStore])
    return (
        <div className="site-card-wrapper">
            {items && items.length > 0 && (
                <Row gutter={16}>
                    {items.map(item=>{
                       return <Col span={8}>
                            <Card title={item.course_name} bordered={false}>
                                <p>开始时间:{item.start_time}</p>
                                <p>截止时间:{item.end_time}</p>
                                <Button type="primary"  onClick={()=>onClick(item.id) } 
                                    disabled = {moment().format('YYYY-MM-DD HH:mm:ss') < item.start_time ? true: false}>
                                    开始考试</Button>
                            </Card>
                        </Col>
                    })}
                </Row>
            )}
        </div>
    )
} 

export default StudentExam